<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>列表渲染</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>

    <div id="app">
        <!-- 遍历数组 -->
        <ul>
            <!-- 也可以用 for...of -->
            <li v-for="(value, index) of persons" :key="value.id">
                {{value.name}} - {{value.age}}
            </li>
        </ul>
        <!-- 遍历对象 -->
        <ul>
            <li v-for="(value, key) in car" :key="key">
                {{key}} - {{value}}
            </li>
        </ul>
        <!-- 遍历字符串 -->
        <ul>
            <li v-for="(value, index) in str" :key="index">
                {{index}} - {{value}}
            </li>
        </ul>
        <!-- 遍历指定次数 -->
        <ul>
            <li v-for="(value, index) in 5" :key="index">
                {{index}} - {{value}}
            </li>
        </ul>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                persons: [
                    { id: '001', name: '张三', age: 18 },
                    { id: '002', name: '李四', age: 19 },
                    { id: '003', name: '王五', age: 20 }
                ],
                car: {
                    name: '奥迪A8',
                    price: '70万',
                    color: '黑色'
                },
                str: 'hello'
            }
        })
    </script>

</body>
</html>